<template>
  <div>
    <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background: palevioletred;border-radius: 20px">贷款数据</h1>
    <el-table
        :data="BorrowerData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="price"
          label="贷款金额"
          width="180">
      </el-table-column>

      <el-table-column
          prop="loanperiods"
          label="贷款期数">
      </el-table-column>
      <el-table-column
          prop="repaymentType"
          label="还款方式">
      </el-table-column>
      <el-table-column
          prop="purpose"
          label="贷款用途">
      </el-table-column>
      <el-table-column
          prop="annual"
          label="年利率">
      </el-table-column>
      <el-table-column
          prop="states"
          label="审核状态">
        <template slot-scope="scope">
          <p v-if="scope.row.states==0">待审核</p>
          <p v-if="scope.row.states==1">已审核</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          :formatter="dateForma"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="startTime"
          :formatter="dateForma"
          label="生效时间">
      </el-table-column>
    </el-table>



<!-- 个人信息   -->
    <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background:blueviolet;border-radius: 20px">个人信息资料</h1>
    <el-table
        :data="InformationData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="marriageStatus"
          label="婚姻状况"
          width="180">
      </el-table-column>
      <el-table-column
          prop="professionType"
          label="职业类型"
          width="180">
      </el-table-column>

      <el-table-column
          prop="unit"
          label="单位名称">
      </el-table-column>
      <el-table-column
          prop="address"
          label="详细地址">
      </el-table-column>
      <el-table-column
          prop="contactName"
          label="练习姓名">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="relation"
          label="关系">
      </el-table-column>
    </el-table>


<!-- 贷款产品-->
    <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background:palegreen;border-radius: 20px">贷款产品资料</h1>
    <el-table
        :data="ProductData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="companyLogo"
          label="公司Logo"
          width="180">
      </el-table-column>
      <el-table-column
          prop="companyName"
          label="公司名称"
          width="180">
      </el-table-column>

      <el-table-column
          prop="tagIds"
          label="产品标签">
      </el-table-column>
      <el-table-column
          prop="amountMax"
          label="最高额度">
      </el-table-column>
      <el-table-column
          prop="amountMin"
          label="最低额度">
      </el-table-column>
      <el-table-column
          prop="annualizedRate"
          label="年化率">
      </el-table-column>
      <el-table-column
          prop="termRange"
          label="期限范围">
      </el-table-column>
    </el-table>
    <!-- 还款记录-->
    <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background:powderblue;border-radius: 20px">还款记录信息</h1>
  <div v-if="isLog">
    <el-table
        :data="RepaymentLog"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="userId"
          label="用户名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="borrowId"
          label="贷款信息"
          width="180">
      </el-table-column>
      <el-table-column
          prop="productId"
          label="贷款商品">
      </el-table-column>
      <el-table-column
          prop="loanInfo"
          label="还款记录信息">
      </el-table-column>
      <el-table-column
          prop="createDate"
          :formatter="dateForma"
          label="还款时间">
      </el-table-column>
      <el-table-column
          prop="money"
          label="还款金额">
      </el-table-column>
    </el-table>
  </div>

  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      logo: require('@/assets/222.png'),
      ProductData:[],
      InformationData:[],
      BorrowerData:[],
      RepaymentLog:[],
      product:{
        productId: this.$route.query.productId,
        pageNum: 1,
        pageSize: 3
      },
      information:{
        infoId:this.$route.query.infoId,
        pageNum: 1,
        pageSize: 3
      },
      borrower:{
        borrowId:this.$route.query.borrowId
      },
      repaymentLog:{
        pageNum: 1,
        pageSize: 3,
        borrowId:this.$route.query.borrowId
      },
      isLog:false
    }
  },
  created() {
    this.list()
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    list(){
      // eslint-disable-next-line no-unused-vars
      this.$http.get("/product/getByPid?productId="+this.product.productId).then( res=>{
        console.log(res.data)
        this.product=res.data.data
        this.ProductData.push(this.product)
      })
      this.$http.get("/information/getById?infoId="+this.information.infoId).then( res=>{
        console.log(res.data)
        this.information=res.data.data
        this.InformationData.push(this.information)
      }),
      this.$http.get("/borrower/getByBorrowId?borrowId="+this.borrower.borrowId).then( res=>{
        console.log(res.data)
        this.borrower=res.data.data
        this.BorrowerData.push(this.borrower)
      }),
          // 查询还款记录信息
      this.$http.post("/repaymentLog/getByRepaymentLog",this.repaymentLog).then( res=>{
        console.log(res.data)
          this.RepaymentLog=res.data.data.records
        //判断是否已有还款记录
        if(this.RepaymentLog.length>0){
          this.isLog=true
        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.product.pageSize=val
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.product.pageNum=val
      this.list()
    },
    goShow(item){
      this.$router.push({
        path:"/ProductShow",
        query:{
          productId:item.productId
        }
      })
    },
    dateForma:function(row,column){

      var date = row[column.property];

      if(date == undefined){return ''};

      return moment(date).format("YYYY-MM-DD HH:mm:ss")

    }
  }
}
</script>

<style scoped>

</style>
